<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    id:<input id="id" type="text">
    name:<input id="name" type="text">

    <button id="add">添加</button>
    <!-- <button id="search">查询</button> -->
    <ul></ul>

    <script src="/Users/yuu/Documents/workspace/codes/chongqing06/projects项目/big-event/lib/axios.min.js"></script>
    <script>

        const ul = document.querySelector('ul');

        // document.querySelector('#search', search);

        document.getElementById('add').addEventListener('click', async () => {
            const res = await axios({
                method: 'post',
                url: 'http://localhost',
                data: {
                    id: Number(document.getElementById('id').value),
                    name: document.getElementById('name').value,
                },
            });
            search();
        });

        async function del (id) {
            const res = await axios({
                method: 'delete',
                url: 'http://localhost/' + id,
            });
            search();
        }

        async function search () {
            const res = await axios({
                method: 'get',
                url: 'http://localhost',
            });
            ul.innerHTML = '';
            for (const item of res.data) {
                const li = document.createElement('li');
                li.innerHTML = `${item.id} ${item.name} <button onclick="del(${item.id})">删除</button>`;
                ul.appendChild(li);
            }
        }

        search();

    </script>
</body>
</html>